<template>
  <div class="companyInfo">
    <Header title="公司信息" />
    <div class="mui-content">
      <div
        id="slider"
        class="mui-slider mui-fullscreen"
      >
        <div
          id="sliderSegmentedControl"
          class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
        >
          <div class="mui-scroll companyInfo-nav">
            <!--放入内容-->
            <a
              v-for="(item, index) in nav_list"
              :key="index"
              :class="{' mui-active': index === 0}"
              :href="`#${item.id}`"
              @tap="clickNav(item)"
              class="mui-control-item companyInfo-nav-a"
            >{{ item.name }}</a>
          </div>
        </div>
        <div
          class="mui-slider-group"
          style="margin-top: 5px;"
        >
          <div
            v-for="({ id,typeCode }, index) in nav_list"
            :id="id"
            :typeCode="typeCode"
            :key="index"
            class="mui-slider-item mui-control-content"
            style="border-top:0;"
          >
            <div
              id="scroll1"
              class="mui-scroll-wrapper"
            >
              <div
                v-if="typeCode!='YH_CYWJ'"
                v-html="pageCon[typeCode]"
                class="mui-scroll mui-scroll-con"
              />
              <ul
                v-if="typeCode=='YH_CYWJ'&&pageCon[typeCode]"
                class="mui-scroll mui-scroll-con mui-row"
              >
                <li
                  v-for="({iconStyle,path,name,type, url},index1) in pageCon[typeCode]"
                  :key="index1"
                  :path="path"
                  :type="type"
                  :name="name"
                  v-cloak
                  class="mui-col-sm-3 mui-col-xs-3"
                >
                  <img
                    v-if="typeArry.includes(iconStyle.type)"
                    :src="url"
                    @tap="downLoadFile(path,name)"
                    :data-content="name"
                    :alt="name"
                    type="thumb"
                    data-preview-src=""
                    data-preview-group="1"
                  >
                  <p
                    v-else
                    @tap="downLoadFile(path,name)"
                  >
                    {{ type }}
                    <i
                      :class="iconStyle.icon"
                    />
                    <!-- v-if="typeArr.includes(type)"<i
                      v-show="type=='xlsx'"
                      :class="{'jeicon-excel':type=='xlsx'}"
                      class="jeicon"
                    />
                    <i
                      v-show="['word','docx','doc'].includes(type)"
                      :class="{'jeicon-word':['word','docx','doc'].includes(type)}"
                      class="jeicon"
                    />
                    <i
                      v-show="type=='pdf'"
                      :class="{'jeicon-pdf':type=='pdf'}"
                      class="jeicon"
                    />
                    <i
                      v-show="type=='zip'"
                      :class="{'jeicon-zip':type=='zip'}"
                      class="jeicon"
                    />
                    <i
                      v-show="type=='unfinded'"
                      :class="{'jeicon-unknownfile1':type=='unfinded'}"
                      class="jeicon"
                    /> -->
                    <!-- </a> -->
                  </p>
                  <span>{{ name }}</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getComInfo } from './actions';
import Icon from '@/components/icon';
import Header from '@/components/header';


export default {
  name: 'CompanyInfo',
  components: {
    Icon, Header,
  },
  data() {
    return {
      typeArry: ['jpg', 'JPG', 'jpeg', 'PNG', 'bmp', 'gif', 'image'],
      nav_list: [
        {
          name: '公司概况',
          type: '01',
          typeCode: 'YH_GSGK',
          id: 'item1mobile',
        },
        {
          name: '开票信息',
          type: '02',
          typeCode: 'YH_FPXX',
          id: 'item2mobile',
        },
        {
          name: '付款信息',
          type: '03',
          typeCode: 'YH_FKXX',
          id: 'item3mobile',
        },
        {
          name: '常用文件',
          type: '04',
          typeCode: 'YH_CYWJ',
          id: 'item4mobile',
        },
        {
          name: '产品概述',
          type: '05',
          typeCode: 'YH_CPGK',
          id: 'item5mobile',
        },
      ],
      pageCon: {},
      checkData: {},
      checkId: '',
      currentPage: 1,
      pageHost: '',
      companyInfo:{},
    };
  },
  created() {
    const that = this;
    that.initCompany().then(()=>{
      that.clickNav(this.nav_list[0]);
    });
  },
  mounted() {
    const that = this;
    // this.pageHost = `${JE.getServerPath()}/je/document/preview?fileKey=`;
    mui('#sliderSegmentedControl').scroll({
      bounce: false,
      indicators: true, // 是否显示滚动条
    });
    mui('.mui-slider').slider();
    // // 图片放大
    // mui.previewImage();
    // 左右滑动
    document.getElementById('slider').addEventListener('slide', async (e) => {
      this.$set(this.pageCon, 'pageCon', '');
      const num = parseInt(e.detail.slideNumber) + 1;
      // 根据滑动的type获取选中nav的数据
      const type = `0${num}`;
      let item;
      that.nav_list.forEach((list) => {
        if (list.type == type) {
          item = list;
        }
      });
      that.clickNav(item);
    });
  },
  methods: {
    async initCompany(){
      const params = {
        tableCode: 'JE_SAAS_YH',
        pkValue: JE.getCurrentUser().zhId, // 租户Id
      };
      this.companyInfo =await getComInfo(params);
    },
    // 新闻公告数据
    async clickNav(item) {
      // 当前选中的模块的数据
      // const params = {
      //   tableCode: 'JE_SAAS_YH',
      //   pkValue: JE.getCurrentUser().zhId, // 租户Id
      // };
      // const ComInfo = await getComInfo(params);
      if (item.typeCode == 'YH_CYWJ') {
        let datas = '';
        // 处理其他情况
        if (this.companyInfo[item.typeCode]) {
          datas = JSON.parse(this.companyInfo[item.typeCode]);
          datas && datas.forEach((data) => {
            data.iconStyle = JE.getFileIcon(data.name);
            data.url = JE.getFileUrl(data.path, 'preview');
          });
          console.log('datas', datas);
        } else {
          datas = '暂无数据!';
        }
        this.$set(this.pageCon, item.typeCode, datas);
      } else if (item.typeCode == 'YH_CPGK') {
        this.$set(this.pageCon, item.typeCode, this.companyInfo[item.typeCode] ? JE.htmlDecode(this.companyInfo[item.typeCode]) : '<p class="noData">暂无数据</P>');//
        this.$nextTick(() => {
          const context = document.getElementsByClassName('mui-active')[1];
          const a = context.getElementsByTagName('a');
          const img = context.getElementsByTagName('img');
          for (let i = 0; i < img.length; i++) {
            if (img[i].src.includes(JE.getServerPath().substr(7))) {
            } else {
              img[i].src = JE.getServerPath() + img[i].src.substr(7, img[i].src.length);
            }
          }
          for (let i = 0; i < a.length; i++) {
            a[i].onclick = function () {
              plus.runtime.openURL(JE.getServerPath() + this.href.substr(7, this.href.length));
              return false;
            };
          }
        });
      } else {
        this.$set(this.pageCon, item.typeCode, this.companyInfo[item.typeCode] ? JE.htmlDecode(this.companyInfo[item.typeCode]) : '<p class="noData">暂无数据</P>');
        this.$nextTick(() => {
          // 将所有img，a的链接拼上当前环境地址
          const imgList = document.getElementsByTagName('img');
          for (let i = 0; i < imgList.length; i++) {
            imgList[i].src = imgList[i].src.replace('file://', JE.getServerPath());
          }
          const aList = document.getElementsByTagName('a');
          for (let i = 0; i < aList.length; i++) {
            aList[i].src = aList[i].href.replace('file://', JE.getServerPath());
          }
        });
      }
    },
    downLoadFile(path, name) {
      const that = this;
      if (window.plus) { // 支持plus
        const fileName = name;// JE.getFileUrl(path, 'down');
        // const fileName = `docs${path.substring(path.lastIndexOf('/'))}`;
        // 判断文件是否已经下载
        // plus.io.resolveLocalFileSystemURL(JE.getBasicPath(`download/${fileName}`),
        //   (file) => { // 如果已存在文件，则打开文件
        //     if (file.isFile) {
        //       if ('jpg,jpeg,png,gif,JPG,JPEG,BMP,bmp'.indexOf(that.utilType(path)) > -1) {
        //         // that.fullScreenImgSrc = file.fullPath;
        //       } else {
        //         JE.msg('正在打开文件...');
        //         plus.runtime.openFile(JE.getBasicPath(`download/${fileName}`));
        //       }
        //     }
        //   }, () => { // 如果未下载文件，则下载后打开文件
        //     JE.download({
        //       url: JE.getFileUrl(path, 'down'), // JE.buildURL(JE.getFileUrl(path)), // JE.getFileUrl(path),
        //       fileName,
        //       callback() {
        //         JE.closeWaiting();
        //         JE.msg('下载完成！');
        //       },
        //     });
        //   });
        if ('jpg,jpeg,png,gif,JPG,JPEG,BMP,bmp'.indexOf(that.utilType(name)) > -1) {
          JE.preview([{ url: JE.getFileUrl(path, "preview") }]);
        } else {
          JE.download({
              url: JE.getFileUrl(path, 'down'), // JE.buildURL(JE.getFileUrl(path)), // JE.getFileUrl(path),
              fileName,
              callback() {
                JE.closeWaiting();
                JE.confirm('文件下载完成，是否要打开文件', (e) => {
                  if (e.index > 1) {
                    JE.openFile(JE.getBasicPath(`download/${fileName}`)).catch(() => {
                      JE.msg('文件打开失败!');
                    });
                  }
                });
              },
            });
        }
      } else { // 不支持plus
        if ('jpg,jpeg,png,gif,JPG,JPEG,BMP,bmp'.indexOf(that.utilType(name))!=-1) {
          JE.preview([{ url: JE.getFileUrl(path, 'preview') }]);
        }else{
          // JE.preview([{ url: JE.getFileUrl(path, 'preview') }]);
          window.open(JE.getFileUrl(path, 'down'));
        }
      }
    },
    utilType(path) {
      return path.substring(path.lastIndexOf('.') + 1);
    },
  },
};
</script>
<style>
.mui-preview-header .mui-preview-indicator{
  width: 100%!important;
}
</style>
<style lang="less" scoped>
@import "~@/theme/index.less";
  .companyInfo-nav {
    color: #3f3f3f;
    font-size: 16 * @hd;
    height: 44 * @hd;
    background: #FFFFFF;
    .companyInfo-nav-a{
      font-size: 16 * @hd;
      border-bottom: 1px solid transparent;
      height: 38 * @hd;
      line-height: 38 * @hd;
    }
  }
</style>
<style lang="less">
@import "~@/theme/index.less";
html,
body {
  background-color:#F8F8F8 !important;
}
.noData {
  position: absolute;
  top: 50%;
  width: 100%;
  left: 0;
  margin-top: -20 * @hd;
  text-align: center;
  font-size: 20 * @hd;
  color: #bebebe;
  margin-top: 70%;
}
.no-header .mui-fullscreen{
  top: 0!important;
}
.mui-fullscreen{
  top: 45 * @hd;
}
.mui-bar ~ .mui-content .mui-fullscreen {
  top: 44 * @hd;
  height: auto;
}
.mui-scroll-con{
  padding:10px;
}
.mui-scroll-con  .mui-col-xs-3{
  border-bottom:1px dashed #F5F5F5;
  height: 120 * @hd;
  overflow: hidden;
}
.mui-scroll-con .jeicon{
  font-size: 40 * @hd;
  line-height: 60 * @hd;
  margin-left:25 * @hd;
}
.mui-scroll-con .jeicon-excel{
  color: rgb(16,123,15)
}
.mui-scroll-con .jeicon-word{
  color: #13227a;
}
.mui-scroll-con .jeicon-pdf{
 color: #d81e06;
}
.mui-scroll-con .jeicon-zip{
 color: rgb(244,234,42)
}
.mui-scroll-con  .mui-col-xs-3 img{
  display:block;
  max-width:50% !important;
  margin:14*@hd auto;
  height:40*@hd !important;
}
.mui-scroll-con  .mui-col-xs-3 span{
    width: 80%;
    height:40 * @hd;
    font-size: 12 * @hd;
    color: #111;
    text-align: center;
    margin: 0 auto;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    overflow: hidden;
    /*! autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
    word-wrap:break-word
}
.mui-pull-top-tips {
  position: absolute;
  top: -20 * @hd;
  left: 50%;
  margin-left: -25 * @hd;
  width: 40 * @hd;
  height: 40 * @hd;
  border-radius: 100%;
  z-index: 1;
}
.mui-scroll-wrapper{
  background:#fff;
}
.mui-bar ~ .mui-pull-top-tips {
  top: 24 * @hd;
}
.mui-pull-top-wrapper {
  width: 42 * @hd;
  height: 42 * @hd;
  display: block;
  text-align: center;
  background-color: #efeff4;
  border: 1 * @hd solid #ddd;
  border-radius: 25 * @hd;
  background-clip: padding-box;
  box-shadow: 0 4 * @hd 10 * @hd #bbb;
  overflow: hidden;
}
.mui-pull-top-tips.mui-transitioning {
  -webkit-transition-duration: 200ms;
  transition-duration: 200ms;
}
.mui-pull-top-tips .mui-pull-loading {
  margin: 0;
}
.mui-pull-top-wrapper .mui-icon,
.mui-pull-top-wrapper .mui-spinner {
  margin-top: 7 * @hd;
}
.mui-pull-bottom-tips {
  text-align: center;
  background-color: #efeff4;
  font-size: 15 * @hd;
  line-height: 40 * @hd;
  color: #777;
}
.mui-pull-top-canvas {
  overflow: hidden;
  background-color: #fafafa;
  border-radius: 40 * @hd;
  box-shadow: 0 4 * @hd 10 * @hd #bbb;
  width: 40 * @hd;
  height: 40 * @hd;
  margin: 0 auto;
}
.mui-pull-top-canvas canvas {
  width: 40 * @hd;
}
.mui-slider-indicator.mui-segmented-control {
  background-color: #ffffff;
}
// 修改tab标签高度
.mui-segmented-control.mui-scroll-wrapper {
  height: 40 * @hd;
}
.mui-slider .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
  border-bottom: 1px solid #007aff;
}
.mui-fullscreen .mui-segmented-control~.mui-slider-group {
  top: 40 * @hd;
}
</style>
